<template>
    <div>
        <div class="vs-table-box" v-loading="loading" style="padding: 20px 100px">
            <div class="tit">顾客信息</div>
            <div style="margin: 20px 0">
                <el-radio v-model="form.type" label="1" :disabled="pagePgae == 1" size="mini"
                    @input="switchType">会员预约</el-radio>
                <el-radio v-model="form.type" label="2" @input="switchType" :disabled="pagePgae == 1"
                    size="mini">非会员预约</el-radio>
            </div>
            <div style="width: 350px; margin: 20px 0" v-show="form.type == 1">
                <el-input placeholder="请输入姓名、手机号或会员卡号" :readonly="pagePgae == 1" v-model.trim="keys"
                    @keyup.enter.native="getUserSearch">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    <div slot="append" @click="getUserSearch" class="search-right">
                        <i v-show="isBtn2" class="el-icon-loading"></i>
                        查找会员
                    </div>
                </el-input>
            </div>
            <el-descriptions border :column="4" style="margin-top: 20px" v-show="form.type == 1">
                <el-descriptions-item label="姓名">
                    <el-input v-model="form.name" readonly placeholder=""></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="性别">
                    <el-radio v-model="form.gender" readonly :label="1" size="mini">男</el-radio>
                    <el-radio v-model="form.gender" readonly :label="2" size="mini">女</el-radio>
                </el-descriptions-item>
                <el-descriptions-item label="电话">
                    <el-input :value="form.phone" readonly placeholder=""></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="会员卡号">
                    <el-input :value="user.vip_no" readonly placeholder=""></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="头围">
                    <el-input :value="user.header" readonly placeholder=""></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="前后">
                    <el-input :value="user.around" readonly placeholder=""></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="左右">
                    <el-input :value="user.about" readonly placeholder=""></el-input>
                </el-descriptions-item>
            </el-descriptions>

            <el-descriptions border :column="4" style="margin-top: 20px" v-show="form.type == 2">
                <el-descriptions-item label="姓名">
                    <el-input v-model="form.name" :readonly="pagePgae == 1" placeholder=""></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="性别">
                    <el-radio v-model="form.gender" :disabled="pagePgae == 1" :label="1" size="mini">男</el-radio>
                    <el-radio v-model="form.gender" :disabled="pagePgae == 1" :label="2" size="mini">女</el-radio>
                </el-descriptions-item>
                <el-descriptions-item label="电话">
                    <el-input v-model="form.phone" :readonly="pagePgae == 1" placeholder=""></el-input>
                </el-descriptions-item>
            </el-descriptions>

            <div class="line"></div>

            <div class="tit" style="margin-top: 40px">预约信息</div>
            <div>
                <el-form ref="form" :model="form" label-width="120px" label-position="left">
                    <el-form-item label="预约人数">
                        <el-radio v-model="form.number" :label="1" :disabled="pagePgae == 1" size="mini">1人</el-radio>
                        <el-radio v-model="form.number" :label="2" :disabled="pagePgae == 1" size="mini">2人</el-radio>
                        <el-radio v-model="form.number" :label="3" :disabled="pagePgae == 1" size="mini">3人</el-radio>
                        <el-radio v-model="form.number" :label="4" :disabled="pagePgae == 1" size="mini">4人</el-radio>
                        <el-radio v-model="form.number" :label="5" :disabled="pagePgae == 1" size="mini">5人</el-radio>
                    </el-form-item>
                    <el-form-item label="项目名称">
                        <el-checkbox-group v-model="projectArr">
                            <el-checkbox :disabled="pagePgae == 1" v-for="item in projectList" :key="item.id"
                                :label="item.id">{{ item.name }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="预计到店时间">
                        <el-date-picker v-model="form.date" :readonly="pagePgae == 1" @change="getFreeReserve"
                            value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <div class="timer_body" v-loading="isFree"
                        :style="!freeList.length ? 'justify-content: center;' : ''">
                        <div v-for="(item, index) in freeList" :key="index" class="timer_info" @click="setTime(item)"
                            :class="{
                                set_timer_info: pagePgae != 1,
                                n_select: item.num == 0,
                                'active-time': item.time == form.time,
                            }">
                            <div>{{ item.time }}</div>
                            <div>{{ item.num | setNumber }}</div>
                        </div>
                        <el-empty v-show="!isFree && !freeList.length" description="暂无数据"></el-empty>
                    </div>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.remark" :readonly="pagePgae == 1" :rows="4"
                            placeholder=""></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div style="margin: 20px 0"></div>
            <div class="vs-bottom-btns">
                <el-button v-if="pagePgae != 1" @click="subitm" :loading="isBtn" type="primary">确 定</el-button>
                <el-button @click="utils.backPage()" style="margin-left: 100px">返 回</el-button>
            </div>
        </div>
        <vs-select-user v-model="dialogVisible3" @affirm="affirmUser" :data="vipUserList"></vs-select-user>
    </div>
</template>

<script>
import VsSelectUser from '@/components/VsSelectUser.vue';
export default {
    components: { VsSelectUser },
    filters: {
        setNumber(val) {
            if (Number(val) == 0) {
                return "已约满";
            } else {
                return `可预约${val}人`;
            }
        },
    },
    data() {
        return {
            dialogVisible3: false,
            vipUserList: [],
            input4: "",
            tableData: [{}],
            radio: true,
            radio2: 1,
            keys: "",
            isBtn: false,
            loading: false,
            projectList: [],
            freeList: [],
            isFree: false,
            isBtn2: false,
            user: {},
            pagePgae: 2,
            id: "",
            form: {
                id: "",
                type: "1", //1会员预约 2非会员
                user_id: "", //会员id
                name: "", //	姓名
                gender: "", //性别 1男 2女
                phone: "", //	手机号
                number: "", //人数
                project: [], //项目id
                date: "", //预约日期
                time: "", //预约时间
                remark: "", //备注
            },
            project: [], //获取详情里面已选择的项目列表
            projectArr: [], //获取中的项目
        };
    },
    async created() {
        let { id, type = 2 } = this.$route.query;
        this.pagePgae = type;
        if (id) {
            await this.getReserve(id);
            this.id = id;
        }
        this.utils.typeTitle(type, "预约");
        await this.getProject();
    },
    methods: {
        switchType(i) {
            this.form.user_id = "";
            this.form.name = "";
            this.form.gender = "";
            this.form.phone = "";
        },
        setTime(item) {
            if (item.num && this.pagePgae != 1) {
                this.form.time = item.time;
            }
        },
        async getReserve(id) {
            this.loading = true;
            let { code, data } = await this.$Http.getReserve({ id });
            this.loading = false;
            if (code) {
                let ar = data.time.split(":");
                data.time = ar[0] + ":" + ar[1];
                this.user = data.user || {};
                let { id, user_id, name, gender, phone, number, date, time, remark } =
                    data;
                this.form = {
                    id,
                    user_id,
                    name,
                    gender,
                    phone,
                    number,
                    date,
                    time,
                    remark,
                };
                let project_id = data.project_ids.split(",").map(Number);
                this.projectArr = project_id;
                this.form.type = this.user.vip_id ? "1" : "2";
                this.project = data.project;
                console.log(this.form, "this.formthis.formthis.form");
                this.getFreeReserve(data.date);
            }
        },
        async created() {
            let { id, type = 2, vip_no } = this.$route.query;
            this.pagePgae = type;
            if (id) {
                await this.getReserve(id);
                this.id = id;
            } else if (vip_no) {
                this.keys = vip_no;
                this.getUserSearch();
            }
            this.utils.typeTitle(type, "预约");
            await this.getProject();
        },
        affirmUser(data) {
            this.form = Object.assign(this.form, {
                user_id: data.id,
                name: data.realname,
                gender: data.gender,
                phone: data.phone,
            });
            this.user = data;
        },
        async getUserSearch() {
            if (!this.keys || this.isBtn2) return;
            this.isBtn2 = true;
            let { code, data } = await this.$Http.getUserSearch({ keys: this.keys });
            this.isBtn2 = false;
            if (code) {
                if (data.length == 0) return this.$message.error("未查询到会员信息");
                this.dialogVisible3 = true;
                this.vipUserList = data;
            }
            // if (code && data) {
            //   this.form = Object.assign(this.form, {
            //     user_id: data.id,
            //     name: data.realname,
            //     gender: data.gender,
            //     phone: data.phone,
            //   });
            //   this.user = data;
            // } else this.$message.warning("没有查询到相关的用户信息");
        },
        async getFreeReserve(e) {
            if (!e) {
                this.freeList = [];
                this.form.time = "";
                return;
            }
            this.isFree = true;
            let { code, data } = await this.$Http.getFreeReserve({ date: e });
            this.isFree = false;
            if (code) {
                this.freeList = data;
            }
        },
        async getProject() {
            let { code, data } = await this.$Http.getProject({ is_all: 1 });
            if (code) {
                this.projectList = data;
            }
        },
        handleChange(e, item) {
            console.log(e);
            console.log(item);
        },
        async subitm() {
            if (!this.form.name) return this.$message.error("姓名不能为空");
            // if (!this.form.gender) return this.$message.error('请选择性别')
            if (!this.form.phone) return this.$message.error("手机号不能为空");
            if (!this.form.number) return this.$message.error("请选择预约人数");
            if (!this.projectArr.length) return this.$message.error("请选择预约项目");
            if (!this.form.date) return this.$message.error("请选择预约日期");
            if (!this.form.time) return this.$message.error("请选择预约时间");
            let params = Object.assign({}, this.form);
            let arr = [];
            if (this.project.length) {
                // 编辑
                this.projectArr.forEach((ele) => {
                    let id = "";
                    let num = 1;
                    this.project.forEach((val) => {
                        if (ele == val.project_id) {
                            id = val.id;
                            num = val.number;
                        }
                    });
                    var obj = {
                        id: id,
                        project_id: ele,
                        number: num,
                    };
                    arr.push(obj);
                });
            } else {
                // 新增
                this.projectArr.forEach((ele) => {
                    var obj = {
                        id: "",
                        project_id: ele,
                        number: 1,
                    };
                    arr.push(obj);
                });
            }
            console.log(arr, "arrarrarr");
            params.project = arr;
            this.isBtn = true;
            let { code, data } = await this.$Http.setReserve(params);
            this.isBtn = false;
            if (code) {
                this.$message.success(this.form.id ? "修改成功" : "添加成功");
                if (this.project.length) {
                    this.utils.backPage();
                } else {
                    // 跳转前台收银
                    let projectList = this.projectList.filter((v) =>
                        this.projectArr.some((v2) => v2 == v.id)
                    );
                    this.$router.push({
                        name: "cashier",
                        query: { vip_no: this.user.vip_no },
                        params: { projectList: projectList },
                    });
                }
            }
        },
        dialogBeforeClose() {
            this.dialogVisible = false;
        },
    },
};
</script>

<style>
.disabled .el-upload--picture-card {
    display: none !important;
}
</style>
<style lang="scss" scoped>
::v-deep {
    .el-input {
        .el-input-group__append {
            padding: 0;
        }
    }
}

.search-right {
    padding: 0 20px;
    box-sizing: content-box;
    line-height: 38px;
    cursor: pointer;

    &:hover {
        background: #eceded;
        transition: all 0.3s;
    }
}

.orderStatus {
    padding: 40px 40px;
    display: flex;
    align-items: center;

    .left_order_status {
        display: flex;
        align-items: center;

        >span {
            margin-left: 30px;
            font-size: 22px;
            color: red;
        }
    }

    .right_money {
        margin-left: auto;
        display: flex;
        align-items: center;

        >div {
            display: flex;
        }

        >div:first-child {
            margin-right: 40px;
            color: red;
        }
    }
}

.tit {
    margin: 20px 0;
    font-size: 16px;
    font-weight: 700;
}

.money {
    display: flex;
    flex-direction: column;

    >div {
        padding: 0 40px;
        margin-top: 10px;
        text-align: right;
    }
}

.order_info {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;

    >div {
        display: flex;
        align-items: center;

        >span {
            width: 150px;
        }
    }
}

.timer_body {
    display: flex;
    flex-wrap: wrap;
    margin: 40px 0;
    padding: 20px 40px;
    border: 1px solid rgba($color: #000000, $alpha: 0.1);
    border-radius: 4px;
    min-height: 300px;

    .set_timer_info {
        cursor: pointer;

        &:hover {
            color: #409eff;
            background: #ecf5ff;
            border-color: #b3d8ff;
            transition: all 0.4s;
        }
    }

    .timer_info {
        margin: 10px 33px;
        padding: 8px 0;
        width: 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid rgba($color: #000000, $alpha: 0.1);
        border-radius: 8px;

        >div:first-child {
            font-size: 14px;
        }

        >div:last-child {
            font-size: 12px;
            margin-top: 5px;
        }
    }

    .active-time {
        color: #409eff;
        background: #ecf5ff;
        border-color: #b3d8ff;
    }

    .n_select {
        cursor: not-allowed;
        background-color: rgba($color: #000000, $alpha: 0.2);
    }
}

.kong {
    margin: 10px 20px;
    padding: 8px 0;
    width: 120px;
}

.vs-bottom-btns {
    justify-content: left;
}
</style>
